<!-- <script setup>
// import { ref, onMounted } from 'vue'
</script>
<template>
  <div>车辆编辑：1</div>
  <div>车辆体积：100</div>
</template>

<style scoped></style> -->
<script setup>
import { ref, onMounted } from 'vue'
import { getDriverByIdAPI, putDriverByIdAPI } from '@/services/driver'
import { message } from 'ant-design-vue'
import { getBusinessHallTreeAPI } from '@/services/businessHall'

// const typeList = ref([])
// import SelectTruckTypes from './SelectTruckTypes.vue'
const props = defineProps({
  /** 车辆id */
  truckId: {
    type: String,
    required: true,
  },
})
const emit = defineEmits(['change', 'update:page', 'update:pageSize', 'edit', 'ok'])
// 回单详情
const detail = ref({
  // 员工编号
  userId: '',
  /** 司机姓名 */
  name: '',
  /** 所属机构 */
  agency: '',
  /** 车辆体积 */
  allowableVolume: '',
  /** 电话 */
  mobile: '',
  /** 年龄 */
  age: '',
})
// 是否显示 loading
const isLoging = ref(false)
// 是否处于编辑状态
const isEdit = ref(false)

// 获取员工基本信息
const getDetail = async () => {
  // 打开抽屉时，显示 loading
  isLoging.value = true
  // 获取回单详情
  const res = await getDriverByIdAPI(props.truckId)
  console.log(res)
  // 关闭 loading
  isLoging.value = false
  // 绑定数据
  detail.value = res.data
  // 绑定图片信息
  // const [pic1, pic2] = res.data?.picture?.split(',') || []
  // // 绑定正面照信息
  // detailPicture1.value = pic1 ? [{ uid: pic1, url: pic1 }] : []
  // // 绑定侧面照信息
  // detailPicture2.value = pic2 ? [{ uid: pic2, url: pic2 }] : []
}

onMounted(() => {
  getDetail()
  getTreeData()
})

const tempdetail = ref({})
// 点击编辑按钮
const onEdit = () => {
  isEdit.value = true
  // 复制一份数据，用于取消编辑时恢复数据
  tempdetail.value = { ...detail.value }
}

const formRef = ref()
const onEditCancel = () => {
  isEdit.value = false
  // 恢复数据
  detail.value = tempdetail.value
  // 重置移除表单项的校验结果
  formRef.value.clearValidate()
}
// 提交编辑表单
const onFinish = async () => {
  // 提取关键参数
  const { id, ...data } = detail.value
  // 提交编辑基本信息表单，后端无返回值
  await putDriverByIdAPI(id, data) //更新信息
  // 编辑完成标记
  isEdit.value = false
  // 编辑成功提示
  message.success('保存成功')
  emit('ok', false)
}
const treeData = ref([])
const getTreeData = async () => {
  const res = await getBusinessHallTreeAPI()

  // 递归写法处理成组件所需的树形结构
  function mapChildren({ name, id, children }) {
    const item = { label: name, value: id }
    if (children) {
      item.children = children.map(mapChildren)
    }
    return item
  }
  // 保存树形结构数据用于组件展示
  treeData.value = JSON.parse(res.data).map(mapChildren)
}
</script>

<template>
  <a-skeleton v-if="isLoging" active />
  <a-form
    :model="detail"
    :labelCol="{ span: 3 }"
    label-align="right"
    name="nest-messages"
    @finish="onFinish"
    :columns="id"
    :validate-messages="validateMessages"
  >
    <!-- :validate-messages="validateMessages" -->
    <a-form-item :name="'userId'" label="员工编号" required>
      <a-input v-model:value="detail.userId" disabled />
    </a-form-item>
    <a-form-item :name="'name'" label="司机姓名" required>
      <a-input v-model:value="detail.name" :disabled="!isEdit" />
    </a-form-item>
    <!-- <a-form-item :name="['agency', 'name']" label="所属机构" required>
    </a-form-item> -->
    <a-form-item :name="['agency', 'name']" label="所属机构" required>
      <a-tree-select
        v-model:value="detail.agency.name"
        :tree-data="treeData"
        placeholder="请选择所属机构"
        show-search
        allow-clear
        tree-default-expand-all
        tree-node-filter-prop="label"
        :disabled="!isEdit"
      />
    </a-form-item>
    <a-form-item :name="'mobile'" label="电话" required>
      <a-input v-model:value="detail.mobile" :disabled="!isEdit" />
    </a-form-item>
    <a-form-item :name="'age'" label="年龄" required>
      <a-input v-model:value="detail.age" :disabled="!isEdit" />
    </a-form-item>
    <!-- 表单提交 -->
    <a-form-item v-show="isEdit" :wrapper-col="{ offset: 3 }">
      <a-space>
        <a-button type="primary" html-type="submit">保存</a-button>
        <a-button @click="onEditCancel"> 取消 </a-button>
      </a-space>
    </a-form-item>

    <!-- 编辑入口 -->
    <a-form-item v-show="!isEdit" :wrapper-col="{ offset: 3 }">
      <a-button type="primary" @click="onEdit(id)"> 编辑 </a-button>
    </a-form-item>
  </a-form>
</template>

<style scoped lang="scss">
.picture-card {
  display: flex;
  .ant-upload-wrapper {
    width: auto;
  }
}

.car-example {
  &-image {
    width: 100px;
    height: 100px;
    position: absolute;
    object-fit: contain;
    z-index: 1;
    opacity: 0.5;
  }
  &-text {
    position: relative;
    z-index: 2;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.5);
  }
}

// 日期选择器
.ant-picker {
  width: 100%;
}

// 输入框禁用状态
.ant-input-disabled,

// 输入框后缀禁用状态
.ant-input-affix-wrapper-disabled,
.ant-input-affix-wrapper-disabled :deep(.ant-input-disabled),
// 日期选择框禁用状态
.ant-picker-disabled,
.ant-picker-disabled :deep(.ant-picker-input > input),
// 下拉框禁用状态
.ant-select-disabled,
.ant-select-disabled :deep(.ant-select-selector) {
  background-color: #fff !important;
  border-style: none !important;
  color: #222 !important;
  cursor: text !important;
}

// 输入框后缀禁用状态
.ant-input-affix-wrapper-disabled :deep(.ant-input-disabled) {
  width: 50px;
}

// 下拉框禁用状态 - 隐藏下拉箭头
.ant-select-disabled :deep(.ant-select-arrow),
.ant-picker-disabled :deep(.ant-picker-suffix) {
  display: none;
}
</style>
